const studentsData = [
    { id: 1, name: '汪印星', age: '24', gender: '男' },
    { id: 2, name: '李寅峰', age: '22', gender: '男' },
    { id: 3, name: '钟鑫茂', age: '22', gender: '女' },
    { id: 4, name: '张胜江', age: '24', gender: '男' },
    { id: 5, name: '徐阳', age: '25', gender: '男' },
    { id: 6, name: '杨烨', age: '26', gender: '男' },
    { id: 7, name: '杨恩', age: '25', gender: '女' },
    { id: 8, name: '夏琪琦', age: '22', gender: '女' },
    { id: 9, name: '罗雷', age: '26', gender: '男' },
    { id: 10, name: '陈阳吉', age: '22', gender: '男' }
];

//======= 点击h2按钮给功能块添加border
//获取左边按钮菜单的父元素，绑定点击事件
let menu_list = document.getElementsByClassName('menu_list')[0];
//获取右边四个功能块，放到一个集合中
let divFunc = document.querySelectorAll('.main_informationDisplay>div');

menu_list.onclick = function (event) {
    if (event.target.nodeName == 'H2') {
        let index = event.target.dataset.id;
        //遍历四个功能块，删除选中的边框样式
        [...divFunc].map(function (item) {
            item.classList.remove('main_informationDisplay_checked')
        })
        //给选中的按钮对应的功能块添加样式 border
        divFunc[index].classList.add('main_informationDisplay_checked');

        [...main_menu].map(function (item) {
            item.classList.remove('menu_checked')
        })
        event.target.classList.add('menu_checked')
    }

}

//====== 点击功能块对应的h2添加选中样式
//获取所有h2按钮
let main_menu = document.getElementsByClassName('main_menu');
//获取四个功能块的父元素，事件委托
let main_informationDisplay = document.getElementsByClassName('main_informationDisplay')[0];

main_informationDisplay.onclick = function (event) {
    let index = event.target.dataset.index;
    if (index) {
        [...main_menu].map(function (item) {
            item.classList.remove('menu_checked');
        })
        main_menu[index].classList.add('menu_checked');
        //遍历四个功能块，删除选中的边框样式
        [...divFunc].map(function (item) {
            item.classList.remove('main_informationDisplay_checked')
        })
        //给点击到的功能块添加border样式
        event.target.classList.add('main_informationDisplay_checked')
    }

}

//====== 渲染函数
// function renderStudents() {

// }
//获取tbody
let tbody = document.getElementsByTagName('tbody')[0];
function renderStudents(data = studentsData) {
    let str = '';
    data.forEach((item) => {
        //一个item就是一个学生的信息对象
        str += `
            <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
                <td>
                    <input type="button" value="修改" data-id=${item.id}>
                    <input type="button" value="删除" data-id=${item.id}>
                </td>
            </tr>
        `
    })
    tbody.innerHTML = str;
}

renderStudents();//一打开页面就要渲染学生信息



let name, age, gender;//公共变量名
//====== 新增学生

//获取新增按钮
let addBtn = document.getElementById('addBtn');
let addName = document.getElementById('addName');
let addAge = document.getElementById('addAge');
let addGenders = document.getElementsByName('addGender');
console.log(addGenders);
addBtn.addEventListener('click', () => {
    name = addName.value, age = addAge.value;
    addGenders.forEach(function (item) {
        if (item.checked) {
            gender = item.value
        }
    })

    if (name && age && gender) {
        let id = studentsData[studentsData.length - 1].id + 1;
        studentsData.push({ id, name, age, gender })
    } else {
        alert('内容不能为空')
    }
    renderStudents();//重新渲染学生信息
    //清空表单的值
    addName.value = '';
    addAge.value = '';
    addGenders.forEach(function (item) {
        item.checked = false;
    })
})


//获取修改表单元素  update
let modifyBtn = document.getElementById('modifyBtn');
let modifyname = document.getElementById('modifyname');
let modifyage = document.getElementById('modifyage');
let modifyid = document.getElementById('modifyid');
let modifygender = document.getElementsByName('modifygender');
tbody.onclick = function (event) {
    let id = event.target.dataset.id;
    if (event.target.value == '删除') {
        //===== 删除学生
        //在数组当中去找id值一样的这个学生，删除它
        studentsData.map((item, index) => {
            if (item.id == id) {
                let sure = confirm(`确认删除${item.name}吗？`)
                if (sure) {
                    studentsData.splice(index, 1)
                }
            }

        })
        renderStudents();//重新渲染学生信息
    } else if (event.target.value == '修改') {
        //===== 修改学生
        //拿到对应的学生信息渲染到修改表单
        studentsData.map((item, index) => {
            if (item.id == id) {
                modifyid.value = item.id;
                modifyname.value = item.name;
                modifyage.value = item.age;
                item.gender === '男' ? modifygender[0].checked = true : modifygender[1].checked = true;
            }

        })
        modifyBtn.disabled = false;

    }

}

//===== 修改按钮事件
modifyBtn.addEventListener('click', () => {
    name = modifyname.value;
    age = modifyage.value;
    modifygender.forEach(function (item) {
        if (item.checked) {
            gender = item.value;
        }
    });

    let id = modifyid.value;//被修改学生的id值
    studentsData.map((item) => {
        if (item.id == id) {
            item.name = name;
            item.age = age;
            item.gender = gender;
        }
    })

    //清空表单的值
    modifyname.value = '';
    modifyage.value = '';
    modifygender.forEach(function (item) {
        item.checked = false;
    })
    renderStudents();
})


//===== 查询
let queryBtn = document.getElementById('queryBtn');
let select = document.getElementById('select');
let selectContent = document.getElementById('selectContent');
queryBtn.addEventListener('click', function () {
    let type = select.value;
    let content = selectContent.value;
    let result = studentsData.filter(function (item) {
        return item[type] == content;
    })
    renderStudents(result);
    selectContent.value='';

    select.value='name';

})

